<template>
  <div class="app-container">
    <avue-crud
      v-model:search="search"
      :page="page"
      :data="pageData?.data"
      :option="option"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchChange"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @refresh-change="handleQuery"
    >
      <template #device_sn="{ row }">
        <el-link :href="`/?#/device/situation/detail?sn=${row.device_sn}`" type="primary">
          {{ row.device_sn }}
        </el-link>
      </template>

      <template #device_name="{ row }">
        <el-link :href="`/?#/device/situation/detail?sn=${row.device_sn}`" type="primary">
          {{ row.device_name }}
        </el-link>
      </template>

      <template #user_info.name="{ row }">
        {{ row.user_info?.name }}
      </template>

      <template #user_info.id_card="{ row }">
        {{ row.user_info?.id_card }}
      </template>

      <template #user_info.mobile="{ row }">
        {{ row.user_info?.mobile }}
      </template>
    </avue-crud>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DeviceSituation",
});

import { PageDataModel } from "@/model/page-data-model";
import options, { DeviceSituationSearch } from "./avue-options";
import { UserDeviceModel } from "@/model/user-device-model";
import DeviceAPI from "@/api/device";

const search = ref<DeviceSituationSearch>({
  page: 1,
});

const option = ref(options);
const pageData = ref<PageDataModel<UserDeviceModel>>();
const loading = ref(false);
const selectIds = ref<number[]>([]);

const page = computed(() => {
  return {
    ...pageData.value,
    layout: "total, prev, pager, next, jumper",
  };
});

/**
 * @description 查询数据
 */
async function handleQuery() {
  loading.value = true;
  DeviceAPI.getUserWithDevicePage(search.value)
    .then((res: any) => {
      pageData.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * @description 分页切换
 * @param val  当前页码
 */
function currentChange(val: number) {
  search.value.page = val;
  handleQuery();
}

/**
 * 处理搜索变化的函数
 * 当搜索条件变化时，此函数会被调用，通常用于处理搜索前的准备工作和搜索完成后的回调
 *
 * @param {Object} params - 包含搜索条件的参数对象
 * @param {Function} done - 一个回调函数，用于通知搜索操作完成
 */
function searchChange(params: Object, done: Function) {
  handleQuery().then(() => {
    done();
  });
}

// 选择改变
function selectionChange(selection: any) {
  selectIds.value = selection.map((item: any) => item.id);
}

// /**
//  * @description 查看
//  * @param id 用户ID
//  */
// function onDetailClick(id: number) {
//   router.push({
//     path: "/user/detail",
//     query: { id },
//   });
// }

// /**
//  * @description 编辑
//  * @param id 用户ID
//  */
// function onEditClick(id: number) {
//   router.push({
//     path: "/user/edit",
//     query: { id },
//   });
// }

// /**
//  * @description 新增
//  */
// function handleAdd() {
//   router.push({
//     path: "/user/add",
//   });
// }

// /**
//  * @description 行删除事件
//  * @param row 行数据
//  * @param index 行索引
//  */
// async function handleDelete(row: any, index: number) {
//   try {
//     await ElMessageBox.confirm("确认删除这条数据吗?", "警告");
//     await UserAPI.delete(row.id);

//     // 删除行数据
//     if (pageData.value && Array.isArray(pageData.value.data)) {
//       pageData.value.data.splice(index, 1);
//     }
//     ElMessage.success("删除成功");
//   } catch (error) {
//     console.error(error);
//   }
// }

onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
